<!DOCTYPE html>
<htmllang="en">

  <head>

    <metacharset="utf-8">

      <metaname="viewport" content="width=device-width, initial-scale=1.0">

        <title>公众号关注：前端Hardy</title>

        <style>
                    body {
                        margin: 0;
                        padding: 0;
                        background: #e8e8e8;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100vh;
                    }

                    .card {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        height: 180px;
                        width: 280px;
                        border-radius: 10px;
                        background: lightgrey;
                        overflow: hidden;
                        transition: 100ms ease;
                        box-shadow: rgba(0, 0, 0, 0.15) 2px 3px 4px;
                    }

                    .info-section {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        height: 75%;
                        color: white;
                    }

                    .left-side {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        height: 100%;
                        z-index: 1;
                        padding-left: 18px;
                    }

                    button {
                        display: block;
                        border: none;
                        background: transparent;
                    }

                    .weather {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        gap: 5px;
                    }

                    .weather div {
                        display: flex;
                        align-items: center;
                    }

                    .weather div:nth-child(1) {
                        width: 40%;
                        height: auto;
                    }

                    .temperature {
                        font-size: 34pt;
                        font-weight: 500;
                        line-height: 8%;
                    }

                    .right-side {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: space-around;
                        height: 100%;
                        padding-right: 18px;
                        z-index: 1;
                    }

                    .right-side>div {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                    }

                    .hour {
                        font-size: 19pt;
                        line-height: 1em;
                        padding-bottom: 4px;
                    }

                    .date {
                        font-size: 15px;
                    }

                    .background-design {
                        position: absolute;
                        height: 100%;
                        width: 100%;
                        /* background-color: #ec7263; */
                        overflow: hidden;
                    }

                    .circle {
                        background-color: #efc745;
                    }

                    .circle:nth-child(1) {
                        position: absolute;
                        top: -80%;
                        right: -50%;
                        width: 300px;
                        height: 300px;
                        opacity: 0.4;
                        border-radius: 50%;
                    }

                    .circle:nth-child(2) {
                        position: absolute;
                        top: -70%;
                        right: -30%;
                        width: 210px;
                        height: 210px;
                        opacity: 0.4;
                        border-radius: 50%;
                    }

                    .circle:nth-child(3) {
                        position: absolute;
                        top: -35%;
                        right: -8%;
                        width: 100px;
                        height: 100px;
                        opacity: 1;
                        border-radius: 50%;
                    }

                    .days-section {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        height: 25%;
                        background-color: #974859;
                        gap: 2px;
                        box-shadow: inset 0px 2px 5px #974859;
                    }

                    .days-section button {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100%;
                        width: 100%;
                        background-color: #a75265;
                        box-shadow: inset 0px 2px 5px #974859;
                        cursor: pointer;
                        transition: 100ms ease;
                        gap: 5px;
                    }

                    .days-section button:hover {
                        scale: 0.9;
                        border-radius: 10px;
                    }

                    .days-section .day {
                        font-size: 10pt;
                        font-weight: 500;
                        color: white;
                        opacity: 0.7;
                    }

                    .icon-weather-day {
                        display: flex;
                        align-items: center;
                        width: 20px;
                        height: 100%;
                    }

                    .city {
                        font-size: 14px;
                    }
                </style>
      </head>

      <body>

        <div class="card">

          <section class="info-section">

            <div class="background-design">

              <!-- <div class="circle">
              </div>

              <div class="circle">
              </div>

              <div class="circle">
              </div> -->
            </div>

            <div class="left-side" style="border: 1px solid green;">

              <div class="weather">

                <div>

                </div>

                <div>晴</div>
              </div>

              <div class="temperature">16°</div>

              <div class="range">-1°/20°</div>
            </div>

            <div class="right-side" style="border: 1px solid green;">

              <div>

                <div class="hour">12:00</div>

                <div class="date">三 01-15</div>
              </div>

              <div class="city">西安市 雁塔区</div>
            </div>
          </section>

          <section class="days-section">
            <button>
              <span class="day">四</span>
              <span class="icon-weather-day">4</span>
            </button> <button>
              <span class="day">五</span>
              <span class="icon-weather-day">
                5

              </span>
            </button> <button>
              <span class="day">六</span>
              <span class="icon-weather-day">
                6
              </span>
            </button> <button>
              <span class="day">日</span>
              <span class="icon-weather-day">
                7
              </span>
            </button>
          </section>
        </div>

      </body>

    </html>
